<template>
  <div class="app-container">
    <DetailPage
      ref="detailPage"
      :model-name="modelName"
      :child-field-name="childFieldName"
      @change="flashData"
    >
      <div slot="after">
        <div>-----------</div>
        <div>
          <el-form v-if="debug" label-position="left">
            <el-row>
              <el-col :span="8">
                <el-form-item label="ID">
                  <span>{{ detailData.id }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="有未核销">
                  <span>{{ has_outstanding }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="支付状态">
                  <span>{{ payment_state__name }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <div>
            未核销
          </div>
          <div>
            <li v-for="unpay in unpays" :key="unpay.id">
              <div>
                <!-- <div>{{ payed.name }}</div> -->
                <button @click="handlePayemnt(unpay)">添加</button>
                <div>movelineID: {{ unpay.id }}</div>
                <div>付款单号: {{ unpay.journal_name }}</div>
                <div>日期: {{ unpay.payment_date }}</div>
                <div>金额: {{ unpay.currency }}{{ unpay.amount }}</div>
              </div>
            </li>
          </div>

          <div>------------</div>

          <div>
            已支付
          </div>
          <div>
            <li v-for="payed in payments" :key="payed.id">
              <div>
                <!-- <div>{{ payed.name }}</div> -->
                <div>付款单ID: {{ payed.account_payment_id }}</div>
                <div>付款单号: {{ payed.ref }}</div>
                <div>日期: {{ payed.date }}</div>
                <div>支付方式: {{ payed.journal_name }}</div>
                <div>付款金额: {{ payed.currency }}{{ payed.amount }}</div>
              </div>
            </li>
          </div>
        </div>
        <div>-----------</div>
      </div>
    </DetailPage>
  </div>
</template>

<script>
import odoo from '@/odooapi'

import DetailPage from '@/selfComponents/DetailPage'

const modelName = 'Test/AccountInvoiceOutDetail'
const childFieldName = ['invoice_line_ids']

export default {
  name: 'Home',
  components: { DetailPage },
  directives: {},
  filters: {},

  data() {
    return {
      debug: odoo.debug,
      modelName: modelName,
      childFieldName: childFieldName,
      Model: undefined,
      detailData: {},
      unpays: [],
      payments: [],
      has_outstanding: undefined,
      payment_state: undefined,
      payment_state__name: undefined
    }
  },

  computed: {},

  async created() {
    this.Model = odoo.env(this.modelName)
  },

  methods: {
    async handlePayemnt(payemnt) {
      //
      console.log('xxxxxx,payemnt', payemnt, this.detailData.id)
      console.log(
        'xxxxxx,payemnt',
        JSON.parse(this.detailData.invoice_outstanding_credits_debits_widget)
      )
      const ret = await this.Model.call('js_assign_outstanding_line', [
        this.detailData.id,
        payemnt.id
      ])

      console.log('xxxxxx,', ret)
      this.$refs['detailPage'].getData()
    },
    flashData(record) {
      // console.log('xxxxxx,flashData', record)
      //       'invoice_outstanding_credits_debits_widget',
      // 'invoice_payments_widget',
      // 'invoice_has_outstanding',
      // 'invoice_payment_state__name',

      this.detailData = { ...record }
      const unpays = JSON.parse(
        record.invoice_outstanding_credits_debits_widget
      )
      this.unpays = unpays ? unpays.content : []

      const payments = JSON.parse(record.invoice_payments_widget)
      this.payments = payments ? payments.content : []

      this.has_outstanding = record.invoice_has_outstanding ? '是' : '否'
      this.payment_state = record.invoice_payment_state
      this.payment_state__name = record.invoice_payment_state__name
    }
  }
}
</script>
